<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>音乐悬浮窗</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: transparent;
            font-size: 14px;
            color: black;
        }

        .floating-small-window {
            width: 300px;
            height: 80px;
            background-color: darkkhaki;
            -webkit-app-region: drag;
            padding: 10px;
            box-sizing: border-box;
            user-select: none;
        }

        .drag-header {
            position: absolute;
            width: 24%;
            height: 30px;
            z-index: -11;
            -webkit-app-region: drag;
            user-select: none;
        }

        #music-dispose-btns {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            -webkit-app-region: no-drag;
            /* 按钮区域不可拖动 */
        }

        .music-btn {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        #control-btns,
        #other-btns {
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

        #control-btns {
            width: 170px;
        }

        #other-btns {
            width: 50px;
        }

        #lyrics {
            margin-top: 5px;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="floating-small-window">
            <div class="drag-header"></div>
            <!-- 音乐控制区域 -->
            <div id="music-dispose-btns">
                <div id="control-btns">
                    <img class="music-btn" :src="previousImage" @click="prev" />
                    <img class="music-btn" :src="isPlaying ? pauseImg : playImg" @click="playPause" />
                    <img class="music-btn" :src="nextImage" @click="next" />
                    <img class="music-btn" :src="likeImage" />
                    <img class="music-btn" :src="isVoice ? muteImage : voiceImage" @click="switchVoice" />
                    <img class="music-btn" :src="volumeImage" />
                </div>
                <div id="other-btns">
                    <img class="music-btn" :src="closeImage" />
                </div>
            </div>
            <!-- 歌词信息 -->
            <div id="lyrics">歌曲名称 - 歌手 - 歌词</div>
            <!-- 歌曲进度条 -->
            <div id="process-bar">进度条</div>
        </div>
    </div>

    <!-- 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
        const { createApp, ref } = Vue;

        const app = createApp({
            setup() {
                const isPlaying = ref(false);
                const isLiked = ref(false);
                const isVoice = ref(false);

                // 图片URL - 你可以替换为自己的图片路径
                const playImg = ref('./music-images/start.svg');
                const pauseImg = ref('./music-images/stop.svg');
                const nextImage = ref('./music-images/next.svg');
                const previousImage = ref('./music-images/previous.svg');
                const likeImage = ref('./music-images/like.svg')
                const closeImage = ref('./music-images/close.svg')
                const voiceImage = ref('./music-images/voice.svg')
                const volumeImage = ref('./music-images/volume.svg')
                const muteImage = ref('./music-images/mute.svg')

                const playPause = () => {
                    isPlaying.value = !isPlaying.value;
                };
                const switchVoice = () => {
                    isVoice.value = !isVoice.value;
                }
                const prev = () => console.log('上一首');
                const next = () => console.log('下一首');

                return {
                    isPlaying, isLiked, isVoice,
                    playImg, pauseImg, switchVoice,
                    nextImage, previousImage,
                    likeImage, closeImage,
                    voiceImage, volumeImage, muteImage,
                    playPause, prev, next,
                };
            }
        });

        app.mount('#app');
    </script>
</body>

</html>